<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" ref="form" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="addUer">添加</el-button>
                </el-form-item>
                <!-- 在职状态 status -->
                <el-form-item>
                    <el-select v-model="query.status" placeholder="请选择在职状态" clearable>
                        <el-option label="在职" value="1"></el-option>
                        <el-option label="离职" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <picker-view type="role" v-model="query.role_id" placeholder="请选择角色"></picker-view>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="姓名/昵称/电话" style="width: 200px" class="filter-item" clearable @clear="doSearch({})" />
                </el-form-item>
                <el-button class="filter-item" type="primary" icon="el-icon-search" native-type="submit" @click="doSearch({})">搜索</el-button>
                <el-button class="filter-item" type="primary" icon="el-icon-download" :loading="downloadLoading">导出</el-button>
            </el-form>
        </div>
    </div>

    <el-table ref="tableView" height="tableHeight" class="page-body" v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" prop="id" width="80px" align="center"></el-table-column>

        <el-table-column label="姓名" width="120">
            <template slot-scope="scope">
                {{ scope.row.realname }}
            </template>
        </el-table-column>

        <el-table-column label="昵称" width="120">
            <template slot-scope="scope">
                {{ scope.row.nickname }}
            </template>
        </el-table-column>

        <el-table-column label="电话" width="120" align="center">
            <template slot-scope="scope">
                {{ scope.row.mobile }}
            </template>
        </el-table-column>

        <el-table-column label="角色">
            <template slot-scope="scope">
                <div class="tag-group">
                    <el-tag effect="dark" size="small" v-for="(item, index) in scope.row.role" :key="index" :type="index % 2 == 0 ? 'primary' : 'success'" style="margin-right: 2px">{{ item.title }}</el-tag>
                </div>
            </template>
        </el-table-column>

        <el-table-column label="排序" prop="sort" width="80" align="center"></el-table-column>

        <el-table-column align="center" prop="status" label="在职状态" width="120">
            <template slot-scope="scope">
                <span>{{ scope.row.status > 0 ? "在职" : "离职" }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="130" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
                <el-button type="primary" size="mini" @click="editUser(row)">
                    编辑
                </el-button>

                <el-dropdown>
                    <el-button size="mini" type="primary" class="btn-more">
                        <i class="el-icon-more"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="setRole(row)">设置角色</el-dropdown-item>
                        <el-dropdown-item @click.native="bindWechat(row)">绑定微信</el-dropdown-item>
                        <el-dropdown-item @click.native="setAuth(row)">设置权限</el-dropdown-item>
                        <el-dropdown-item @click.native="deleteUser(row)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    <div class="page-foot">
        <div class="left">
        </div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>
    
    <save-user ref="saveUser" @getTableData="getTableData"></save-user>
    <set-role ref="setRole" @getTableData="getTableData"></set-role>
    <set-auth ref="setAuth" @getTableData="getTableData"></set-auth>
</div>
</template>

<script>
import {
    getUserListApi,
    bindWechatApi
} from "@/api/ucenter/user";

import saveUser from "./save-user";
import setRole from "./set-role.vue";
import setAuth from "./set-auth.vue";
import pagination from "@/components/mixins/pagination.vue";
import pickerView from '@/components/picker/select.vue';

export default {
    components: {
        saveUser,
        setRole,
        setAuth,
        pickerView
    },
    mixins: [pagination],
    data() {
        return {
            listLoading: false,
            downloadLoading: false,
            query: {
                status: '1',
                role_id: '',
                department_id: '',
                keyword: "",
            },
            tableData: []
        };
    },
    created() {
        // 获取列表数据
        this.getTableData();
    },
    methods: {
        doSearch(options) {
            if (options.department_id) {
                this.query.department_id = options.department_id;
            }

            if (this.query.keyword.length > 0) {
                this.query.department_id = '';
                this.query.role_id = '';
            }
            this.resetPg();
            this.getTableData();
        },

        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;

            this.listLoading = true;
            getUserListApi(params).then((res) => {
                this.listLoading = false;
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.setPg(res);
                }
            });
        },

        // 添加用户
        addUer() {
            this.$refs["saveUser"].showCreateDrawer();
        },

        // 编辑用户
        editUser(row) {
            this.$refs["saveUser"].showEditDrawer(row);
        },

        // 删除用户
        deleteUser(data) {},

        // 设置角色
        setRole(data) {
            this.$refs["setRole"].showDrawer(data);
        },

        setAuth(data) {
            this.$refs['setAuth'].showDrawer(data);
        },

        bindWechat(data) {
            this.$confirm('确定要绑定微信吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                bindWechatApi({
                    id: data.id
                }).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            }).catch(() => {});
        }
    },
};
</script>

<style lang="scss" scoped>
.hide-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-more {
    background-color: transparent;
    border-color: transparent;
    color: #009cff;
    background: transparent;
}
</style>
